<template>
  <view class="box">
    <view>
      <uni-segmented-control :current="current" :values="items" @clickItem="onClickItem" styleType="button"
        activeColor="#1500ff"></uni-segmented-control>
      <view class="content">
<!--        <view v-show="current === 0">

          <view class="hide" v-if="!zhi.length">没有更多订单了</view>
          <view class="box_one" @click="gomore(item)" v-for="item in zhi" :key="item.id">
            <view class="box_one_top">
              <view class="box_one_top_l">
                <h3>{{item.recipientName}}</h3>
              </view>
              <view class="box_one_top_r ">待付款</view>
            </view>

            <view class="box_one_yao">
              <view class="yao_one" v-for="yao in item.drugInfo">

                <view class="yao_img">
                  <img :src="yao.productImage">
                  <view class="yao_r">
                    <view>
                      {{yao.genericName}} <span style="color: darksalmon;">X{{yao.quantity }}</span>
                    </view>
                    <view class="yao_r_gui">
                      <view>规格：</view>
                      <view>{{yao.specification}}</view>

                    </view>
                    <view class="yao_r_gui">
                      <view>单价：</view>
                      <view>￥{{yao.unitPrice}}元</view>
                    </view>
                  </view>
                </view>
              </view>
            </view>

            <view class="box_foot">
              <view>商品原价：</view>
              <view style="color: gray;">￥{{item.totalOriginalAmount}}元</view>
            </view>
            <view class="box_foot">
              <view>实际支付：</view>
              <view style="color: red;">￥{{item.totalActualAmount }}元</view>
            </view>
          </view>

        </view> -->
        <view v-show="current === 0">

     <view class="hide" v-if="!fa.length">没有更多订单了</view>
     <view class="box_one" @click="gomore(item)" v-for="item in fa" :key="item.id">
       <view class="box_one_top">
         <view class="box_one_top_l">
           <h3>{{item.recipientName}}</h3>
         </view>
         <view class="box_one_top_r ">待发货</view>
       </view>

       <view class="box_one_yao">
         <view class="yao_one" >

           <view class="yao_img">
            <!-- <img :src="yao.productImage"> -->
             <view class="yao_r">
               <view>
                 订单号：{{item.order_receive}} <span style="color: darksalmon;"></span>
               </view>
     					<view style="font-size: 25rpx;">
                 下单时间：{{item.create_time.replace(/\+.*$/, '').replace('T', ' ').replace(/\.\d+$/, '')}} <span style="color: darksalmon;"></span>
               </view>
             </view>
           </view>
         </view>
       </view>
       <view class="box_foot">
         <view>实际支付：</view>
         <view style="color: red;">{{(-item.totalActualAmount).toFixed(2)}}￥</view>
       </view>
     </view>
        </view>
        <view v-show="current === 1">

          <view class="hide" v-if="!shou.length">没有更多订单了</view>
          <view class="box_one" @click="gomore(item)" v-for="item in shou" :key="item.id">
            <view class="box_one_top">
              <view class="box_one_top_l">
                <h3>{{item.recipientName}}</h3>
              </view>
              <view class="box_one_top_r ">待收货</view>
            </view>

            <view class="box_one_yao">
              <view class="yao_one" >

                <view class="yao_img">
                 <!-- <img :src="yao.productImage"> -->
                  <view class="yao_r">
                    <view>
                      订单号：{{item.order_receive}} <span style="color: darksalmon;"></span>
                    </view>
					<view style="font-size: 25rpx;">
                      下单时间：{{item.create_time.replace(/\+.*$/, '').replace('T', ' ').replace(/\.\d+$/, '')}}}} <span style="color: darksalmon;"></span>
                    </view>
                  </view>
                </view>
              </view>
            </view>
            <view class="box_foot">
              <view>实际支付：</view>
              <view style="color: red;">{{(-item.totalActualAmount).toFixed(2)}}￥</view>
            </view>
          </view>
        </view>
        <view v-show="current === 2">

         <view class="hide" v-if="!wan.length">没有更多订单了</view>
         <view class="box_one" @click="gomore(item)" v-for="item in wan" :key="item.id">
           <view class="box_one_top">
             <view class="box_one_top_l">
               <h3>{{item.recipientName}}</h3>
             </view>
             <view class="box_one_top_r ">已完成</view>
           </view>

           <view class="box_one_yao">
             <view class="yao_one">

               <view class="yao_img">
                <!-- <img :src="yao.productImage"> -->
                 <view class="yao_r">
                   <view>
                     订单号：{{item.order_receive}} <span style="color: darksalmon;"></span>
                   </view>
         					<view style="font-size: 25rpx;">
                     下单时间：{{item.create_time.replace(/\+.*$/, '').replace('T', ' ').replace(/\.\d+$/, '')}} <span style="color: darksalmon;"></span>
                   </view>
                 </view>
               </view>
             </view>
           </view>
           <view class="box_foot">
             <view>实际支付：</view>
             <view style="color: red;">{{(-item.totalActualAmount).toFixed(2)}}￥</view>
           </view>
         </view>
        </view>
        <view v-show="current === 3">

          <view class="hide" v-if="!qu.length">没有更多订单了</view>
          <view class="box_one" @click="gomore(item)" v-for="item in qu" :key="item.id">
            <view class="box_one_top">
              <view class="box_one_top_l">
                <h3>{{item.recipientName}}</h3>
              </view>
              <view class="box_one_top_r ">已取消</view>
            </view>

            <view class="box_one_yao">
              <view class="yao_one" >

                <view class="yao_img">
                 <!-- <img :src="yao.productImage"> -->
                  <view class="yao_r">
                    <view>
                      订单号：{{item.order_receive}} <span style="color: darksalmon;"></span>
                    </view>
          					<view style="font-size: 25rpx;">
                      下单时间：{{item.create_time.replace(/\+.*$/, '').replace('T', ' ').replace(/\.\d+$/, '')}} <span style="color: darksalmon;"></span>
                    </view>
                  </view>
                </view>
              </view>
            </view>
            <view class="box_foot">
              <view>实际支付：</view>
              <view style="color: red;">{{(-item.totalActualAmount).toFixed(2)}}￥</view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
  import {
    onShow
  } from '@dcloudio/uni-app';

  import gmCrypt from 'gm-crypt'
  // import routingIntercept from '@/utils/to_file.js'
  import {
    onMounted,
    ref
  } from 'vue';
  import {
    dingdan
  } from "../../request/apis.js"
   import {Base64} from "js-base64"
  onMounted(() => {
    const c = uni.getStorageSync("realphone")

    console.log(c, "cc");

    const SM4 = gmCrypt.sm4;
    const sm4Config = {
      key: 'JD2ixnTPpZQeELb5', // 加密解密的密钥
      mode: 'ecb', // 分组连接模式
      cipherType: 'base64', // 密码数据类型
    };

    const sm4s = new SM4(sm4Config);
    const plaintext = c;

    // 加密
    const ciphertext = sm4s.encrypt(plaintext);
    console.log(ciphertext, "bb");
    const jiami = Base64.encodeURL(ciphertext)
    // 发送加密后的数据到后端接口
    dingdan(jiami).then(res => {
      // console.log(res.result);
      all.value = res.result
      console.log(all.value, "all.value ");
      zhi.value = all.value.filter(item => item.logistics_info.orderStatus === 10);
      fa.value = all.value.filter(item => item.logistics_info.orderStatus === 30);
      shou.value = all.value.filter(item => item.logistics_info.orderStatus === 40);
      wan.value = all.value.filter(item => item.logistics_info.orderStatus === 50);
      qu.value = all.value.filter(item => item.logistics_info.orderStatus === 60);
      console.log(fa.value, "fa.value ");
      console.log(shou.value, "fa.value ");
      console.log(wan.value, "fa.value ");
      console.log(shou.value, "fa.value ");
    }).catch(err => {
      console.log(err);
    });
  });
  const items = ref([ '待发货', '待收货', "已完成", "已取消"]);
  const current = ref(0);
  const all = ref([])
  const zhi = ref([])
  const fa = ref([])
  const shou = ref([])
  const wan = ref([])
  const qu = ref([])

  const onClickItem = (e) => {
    if (current.value !== e.currentIndex) {
      current.value = e.currentIndex;
    }
  };
  const gomore = (item) => {
    console.log(item);
    localStorage.setItem("order", JSON.stringify(item))
    uni.navigateTo({
      //保留当前页面，跳转到应用内的某个页面
      url: './more'
    })
  }
</script>



<style scoped>
  .box {
    /* width: 94%; */
    /* height: 100vh; */

    margin: 0 auto;
    /* height: 84vh; */
    background-color: #f3f3f3;
    padding: 3% 3%;
  }

  .box_one {
    width: 100%;
    background-color: white;
    border-radius: 20rpx;
    padding: 20rpx;
    margin-top: 24rpx;
  }

  h3 {
    color: #000;
  }

  .box_one_top {
    display: flex;
    justify-content: space-between;
    /* margin: 15rpx 0; */
    color: grey;
  }

  .yao_img {
    display: flex;
    justify-content: space-between;
  }

  .yao_img img {
    width: 160rpx;
  }

  .yao_r_gui {
    display: flex;
    justify-content: space-between;
    margin-top: 10rpx;
  }

  .yao_one {
    margin-bottom: 10rpx;

  }

  .box_foot {
    display: flex;
    justify-content: space-between;
    /* margin-top: rpx; */
  }

  .hide {
    text-align: center;
    height: 100vh;
    padding-top: 100rpx;
  }
</style>
